import React, {
    PureComponent
} from 'react';

import {
    View,
    Image,
    Text,
    StyleSheet
} from 'react-native';

import {
    Switch
} from 'react-native-switch';

import {
    Tip,
    Layout,
    Button
} from './../../components';

import * as Env from './../../env';

import * as CONST from '../../const';
import * as saveLog from './../../utils/saveLog';

import Store from './../../state';
import * as userTypes from './../../state/types/user';

import logo_icon from './../../images/logo.png';

import device from 'react-native-device-info';

interface State {
    isPro: boolean,
    initDev: boolean
}

class About extends PureComponent<any, State> {
    state = {
        isPro: false,
        initDev: true
    }

    async componentDidMount() {
        const isDev = (
            await Env.getCurDev()
        )
        this.setState({
            isPro: !isDev,
            initDev: isDev
        })
    }

    private _onSwitchChange = async () => {
        const {
            isPro
        } = this.state;
        this.setState({
            isPro: !isPro
        })
    }

    private _onPress = async () => {
        const {
            isPro
        } = this.state;

        if (isPro) {
            await Env.setProduction()
        } else {
            await Env.setDevelopment()
        }
        saveLog.clear();
        Store.dispatch({
            type: userTypes.userLoginOut
        })
        Tip.success({
            message:`切换成功...`
        })
    }

    get disabled() {
        const {
            isPro,
            initDev
        } = this.state;
        return !isPro === initDev;
    }

    render() {
        const {
            isPro
        } = this.state;
        return (
            <Layout title="About FWB" scroll={false}>
                <View style={styles.container}>
                    <Image
                        source={logo_icon}
                        style={styles.logo}
                    />
                    <View style={styles.content}>

                    </View>
                    <View style={styles.version}>
                        <Text style={styles.versionText}>
                            Version: {device.getVersion()}
                        </Text>
                        {Env.__DEV__ && (
                            <View style={styles.envContent}>
                                <View style={styles.env}>
                                    <Text style={styles.envTitle}>
                                        当前环境({isPro ? `正式` : `测试`})：
                                    </Text>
                                    <Switch
                                        value={isPro}
                                        barHeight={20}
                                        circleSize={12}
                                        circleBorderWidth={0}
                                        circleActiveColor="#fff"
                                        circleInActiveColor="#fff"
                                        switchWidthMultiplier={3}
                                        backgroundInactive="#ccc"
                                        backgroundActive={CONST.color}
                                        onValueChange={this._onSwitchChange}
                                    />
                                </View>
                                <Button
                                    title="确认切换"
                                    disabled={this.disabled}
                                    onPress={this._onPress}
                                    style={styles.switchButton}
                                />
                            </View>
                        )}
                    </View>
                </View>
            </Layout>
        )
    }
}

export default About;

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 50
    },
    logo: {
        alignSelf: `center`
    },
    text: {
        fontSize: 12,
        color: `#fff`,
        marginBottom: 16,
        lineHeight: 18
    },
    content: {
        paddingTop: 36
    },
    version: {
        left: 0,
        right: 0,
        bottom: 30,
        position: `absolute`,
        alignItems: `center`,
        justifyContent: `center`
    },
    versionText: {
        fontSize: 16,
        color: `#666`,
        textAlign: `center`,
    },
    env: {
        alignItems: `center`,
        flexDirection: `row`,
        marginTop: 20,
        justifyContent: `center`,
    },
    envTitle: {
        fontSize: 14,
        color: `#666`
    },
    switchButton: {
        height: 36,
        marginTop: 20
    },
    envContent: {}
}) as any;